import { useState } from "react";
import "./app.scss";

const App = function () {
  const [formData, setData] = useState({
    name: "",
    sex: "",
    phone: "",
    qq: "",
    position: "",
  });
  const setState = ({ target }) => {
    const _name = target.name;
    const _value = target.value;
    console.log(_value);

    setData({ ...formData, [_name]: _value });
  };
  const refre = () => {
    if (name, phone, qq, position) {
      const _name = name,
        _phone = phone,
        _qq = qq,
        _position = position;
      console.log(typeof name)
      console.log(
        "该用户的用户名为" + _name,
        "性別為",
        sex === "1" ? "男" : "女",
        "电话号码为" + _phone,
        "邮箱号是" + _qq,
        "职位是" + _position
      );
    } else {
      alert("不能有为空的项");
    }
  };
  const { name, sex, phone, qq, position } = formData;
  return (
    <>
      <form>
        <label>
          <span>用户名</span>
          <input
            type="text"
            placeholder="请输入你的用户名"
            name="name"
            value={name}
            onChange={setState}
          />
        </label>
        <label>
          <span>性别</span>
          <span className="sex">男</span>
          <input
            type="radio"
            onChange={setState}
            name="sex"
            value="1"
            checked={sex === "1"}
          />
          <span className="sex">女</span>
          <input
            type="radio"
            onChange={setState}
            name="sex"
            value="2"
            checked={sex === "2"}
          />
        </label>
        <label>
          <span>电话</span>
          <input
            type="text"
            name="phone"
            value={phone}
            placeholder="请输入你的电话号码"
            onChange={setState}
          />
        </label>
        <label>
          <span>邮箱</span>
          <input
            type="text"
            name="qq"
            value={qq}
            placeholder="请输入你的邮箱号码"
            onChange={setState}
          />
        </label>
        <label>
          <span>上传头像</span>
          <input type="file" name="" id="" />
        </label>
        <label>
          <span>职位</span>
          <input
            type="text"
            name="position"
            value={position}
            placeholder="请输入你的职位"
            onChange={setState}
          />
        </label>
        <label>
          <span>简介</span>
          <textarea placeholder="请输入你的简介"></textarea>
        </label>
        <label>
          <span>爱好</span>
          <input type="checkbox" name="" id="" />
          <span>写代码</span>

          <input type="checkbox" name="" id="" />
          <span>解决bug </span>

          <input type="checkbox" name="" id="" />
          <span>加班</span>
        </label>
        <label>
          <span>所在地</span>
          <select name="" id="">
            <option value="">北京</option>
            <option value="">唐山</option>
            <option value="">哈尔滨</option>
          </select>
        </label>
      </form>
      <div className="btn">
        <button onClick={refre} type="button">
          提交
        </button>
      </div>
    </>
  );
};

export default App;
